<template>
	<view class="content">
		<navbar :isback="isback" :title="title" :is_title="is_title" @change="changeColor"></navbar>
		<view class="my_box">
			<view class="moreSetting">
				<view>
					<view @click="check" :style="{padding: '10rpx 20rpx',borderRadius: '50rpx',background: myBgColor,display:'flex',alignItems: 'center'}">
						<u-icon name="/static/pifu.png" size="48" label="切换皮肤"></u-icon>
					</view>
					
					<!-- <text>切换皮肤</text> -->
					<view @click="setting" :style="{padding: '10rpx 20rpx',borderRadius: '50rpx',background: myBgColor,display:'flex',alignItems: 'center',marginLeft: '20rpx'}">
						<u-icon name="setting" color="#000000" size="48">
						</u-icon>
					</view>
					
					<view @click="outlocal()" :style="{padding: '10rpx 20rpx',borderRadius: '50rpx',background: myBgColor,display:'flex',alignItems: 'center',marginLeft: '20rpx'}">
						<u-icon label="退出"></u-icon>
					</view>
					
				</view>
				<!-- <view @click="drawing">趣味画板</view> -->
			</view>
			<image :src="userInfo.bgImg?userInfo.bgImg:bgImg" class="bg" mode="aspectFill"></image>
			<view class="my" :style="{background:myBgColor}">
				<view class="">
					<view class="setting">
						<!-- <text @click="setting">切换皮肤</text> -->
					</view>
					<u-image width="150rpx" height="150rpx" shape="circle" :src="userInfo.avatar" @click="viewImg([userInfo.avatar],userInfo.avatar)"></u-image>
					<view class="name">
						<text class="userName">{{userInfo.name}}</text>
						<u-icon :name="userInfo.sex==1?'man':userInfo.sex==0?'woman':''"
							:color="userInfo.sex==1?'#2979ff':userInfo.sex==0?'#FF6469':''" size="38"></u-icon>
					</view>
					<view class="jianjie">
						{{userInfo.Introduction}}
					</view>
					<!-- <view class="label">
						<view class="label_b">
							<text>添加标签</text>
							<u-icon name="close" style="margin-left: 20rpx;" color="#2979ff" size="24"></u-icon>
						</view>
					</view> -->
				</view>

			</view>
		</view>
		<u-sticky :offset-top="stickyTop">
			<view class="tab_style">
				<u-tabs-swiper ref="uTabs" :list="noticeType" active-color="#F3533B" :current="current"
					@change="tabsChange" :is-scroll="false" swiperWidth="750" font-size="30"></u-tabs-swiper>
			</view>
		</u-sticky>
		<swiper class="swiper_box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			@change="changeIndex" style="height:85vh;">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="scroll-content" style="height: 100%;width: 100%;"
					@scrolltolower="onreachBottom">
					<view class="memory_box">
						<view class="memory" v-for="(item,index) in list" :key="index">
							<view style="display: flex;flex-direction: column;" @click="toDetail(item._id)">
								<text class="create_time">{{$u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</text>
								<text class="memory_title">{{item.title}}</text>
								<view class="memory_content">{{item.content}}</view>
								<image :src="item.filthImg[0]" v-if="item.filthImg.length == 1" mode="aspectFit" style="margin-top: 20rpx;width: 320rpx;" @click="viewImg(item.filthImg,item.filthImg[0])"></image>
								<view class="list_img" v-else>
									<view class="img" v-for="(it,idx) in item.filthImg" :key="it">
										<u-image width="100%" height="100%" :src="it" @click="viewImg(item.filthImg,it)"></u-image>
									</view>
								</view>
							</view>
							
							<view class="caozuo">
								<button class="delete_memory" open-type="share" :data-item="item">分享</button>
								<button class="delete_memory" @click="remove(item._id,index,item.title)">删除</button>
							</view>

						</view>
					</view>
					<u-empty mode="message" :text="'暂无记录哦~~'+(is_create==false?'暂未开放':'')" :show="isShowEmpty">
					</u-empty>

				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="scroll-content" style="height: 100%;width: 100%;"
					@scrolltolower="onreachBottom">
					<view class="likelist" v-for="(item,index) in likeList" :key="index">
						<rich-text :nodes="item.content"></rich-text>
					</view>
					<u-empty mode="message" text="暂无喜欢哦~~" :show="isShowEmptyLike"></u-empty>

				</scroll-view>
			</swiper-item>

		</swiper>


		<!-- 更多 有趣 -->
		<view class="more_inter" @click="interesting = !interesting" v-if="!interesting">
			<view></view>
			<text>更</text>
			<text>多</text>
			<text>有</text>
			<text>趣</text>
			<view></view>
		</view>
		<u-popup v-model="interesting" mode="right">
			<view class="inter">
				<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6e1a92c2-19ad-4ad9-ba4a-caf65b14a00b/85709398-ef6b-4105-8f97-3e8030a4ddc6.jpg" mode="aspectFill"></image>
				<view class="inter_list" @click="drawing">
					<u-icon name="order" color="#000000" size="36"></u-icon>
					<text>趣味画板</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '个人中心',
				isback: true,
				is_title: true, // 是否自定义顶部内容样式
				// color: '#123456f0',
				myBgColor: this.$store.state.color,
				interesting: false, // 显示更多有趣

				noticeType: [{
					name: '我的',
					count: 0
				}, {
					name: '可能喜欢',
					count: 0
				}],
				// #ifdef MP-WEIXIN
				stickyTop: '116',
				// #endif
				// #ifdef APP-PLUS || H5
				stickyTop: '0',
				// #endif
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				swiperItemIndex: 0, // swiper改变后的下标

				bgImg: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6e1a92c2-19ad-4ad9-ba4a-caf65b14a00b/8f6a4701-0dfe-4662-8960-f555c2055a33.jpg',
				userInfo: {},
				list: [],
				is_create: false,
				isShowEmpty: false, // 是否显示内容为空组件
				pageIndex: 1, // 第几页
				hasMore: true, // 是否还有更多默认true
				likeList: [],
				isShowEmptyLike: false, // 喜欢是否显示内容为空组件
				pageIndexLike: 1, // 可能喜欢第几页
				hasMoreLike: true, // 可能喜欢是否还有更多
			}
		},
		onLoad(options) {
			this.get();
			this.getMaybeLike();
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo");
		},
		methods: {
			//退出（请理本地缓存）
			outlocal(){
				uni.getStorage({
					key:'userInfo',
					success:function(){
						uni.showLoading({
						    title: '退出中'
						});
						uni.removeStorage({
						    key: 'userInfo',
						    success: function () {
								uni.hideLoading();
						       uni.showToast({
						           title: '退出成功',
						           duration: 1500
						       });
						    }
						});
					},
					fail:function(){
						uni.showToast({
							image: '/static/img/tanqi.png',
						    title: '您还没有登录哦',
						    duration: 1500
						});
					}
				})
			},
			// 预览图片
			viewImg(urls, current) {
				this.common.viewImg(urls, current)
			},
			// 切换皮肤
			async check() {
				let that = this;
				let img = await this.common.uploadImageOdd('bgImg');
				let userInfo = uni.getStorageSync("userInfo");
				userInfo.bgImg = img;
				this.userInfo = userInfo;
				uni.setStorageSync("userInfo", userInfo);
			},
			// 获取导航栏颜色
			changeColor(e) {
				this.myBgColor = e;
			},
			// 设置
			setting() {
				uni.navigateTo({
					url: 'setting/setting'
				})
			},
			// 获取数据
			get() {
				let that = this;
				uni.showLoading({
					title: '获取中...'
				})
				uniCloud.callFunction({
					name: 'get',
					data: {
						dbName: 'memor-pool', //要查询的表名
						filter: {
							uid: that.$store.state.uid
						}, //筛选条件，格式{sex:'女'}
						pageIndex: this.pageIndex, //第几页
						pageSize: 10 //每页的记录条数
					},
					success(res) {
						// console.log(res);
						uni.hideLoading();

						let datalist = res.result.data;
						that.list = that.list.concat(datalist);
						if (that.list.length == 0) { // 不知为何小程序页面内直接判断实效，后面找原因
							that.isShowEmpty = true
						} else {
							that.isShowEmpty = false
						}
						that.hasMore = res.result.hasMore; // 是否还有更多
						that.is_create = res.result.is_create; // 是否可自定义内容

					}
				})
			},
			// 获取maybe
			getMaybeLike() {
				let that = this;
				uniCloud.callFunction({
					name: 'maybe-like',
					data: {
						dbName: 'maybe-like', //要查询的表名
						filter: {
							uid: that.$store.state.uid
						}, //筛选条件，格式{sex:'女'}
						pageIndex: this.pageIndexLike, //第几页
						pageSize: 10 //每页的记录条数
					},
					success(res) {
						// console.log(res);
						uni.hideLoading();

						let datalist = res.result.data;
						that.likeList = that.likeList.concat(datalist);
						if (that.likeList.length == 0) { // 不知为何小程序页面内直接判断实效，后面找原因
							that.isShowEmptyLike = true
						} else {
							that.isShowEmptyLike = false
						}
						that.hasMoreLike = res.result.hasMoreLike; // 是否还有更多
					}
				})
			},
			// 删除
			async remove(_id, index, title) {
				var that = this;
				uni.showModal({
					title: '《' + title + '》',
					content: '您确定要删除笔记《' + title + '》？',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							})
							uniCloud.callFunction({
								name: 'remove',
								data: {
									_id: _id
								}
							}).then((res) => {
								uni.hideLoading();
								uni.showToast({
									title: res.result.msg
								})
								// console.log(res);
								that.list.splice(index, 1); // 删除成功，删除本地暂不请求接口

								// return res.result.msg
							}).catch((err) => {
								uni.hideLoading()
								uni.showModal({
									content: `删除失败，错误信息为：${err.message}`,
									showCancel: false
								})
								console.error(err)
							})
						}
					}
				})

			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// swiper  change
			changeIndex(event) {
				let current = event.detail.current;
				this.swiperItemIndex = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				// 触底的时候请求数据，即为上拉加载更多
				if (this.swiperItemIndex == 0) {
					if (this.hasMore) {
						this.pageIndex++
						this.get();
					}
				} else if (this.swiperItemIndex == 1) {
					if (this.hasMoreLike) {
						this.pageIndexLike++
						this.getMaybeLike();
					}
				}

			},

			// 趣味画板
			drawing() {
				console.log(111)
				this.interesting = !this.interesting;
				uni.navigateTo({
					url: './drawing/drawing'
				})
			},
			// 查看详情
			toDetail(_id) {
				uni.navigateTo({
					url: '../index/memorDetail/memorDetail?_id=' + _id
				})
			},
		},
		onShareAppMessage(res) {
			// console.log(res);
			let title = '';
			if (res.from === 'button') {
				title = res.target.dataset.item.name + '邀请您欣赏笔记《' + res.target.dataset.item.title + '》'
			} else {
				let userInfo = uni.getStorageSync("userInfo");
				title = (userInfo ? userInfo.name : '一团团') + '邀请您分享笔记';
			}

			return {
				title: title,
				path: 'pages/index/index?_id=' + res.target.dataset.item._id,
				imageUrl: res.target.dataset.item.avatar,
				desc: '',
				content: ''
			}
		},
	}
</script>

<style scoped>
	.my_box {
		position: relative;
	}

	.my {

		/* background-image: linear-gradient(to bottom right, #c5dde3, #d1ecdf); */
		padding: 30rpx 30rpx 60rpx;


	}

	.my>view {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 98;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		filter: blur(2rpx);
	}

	.setting {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: flex-end;
		/* margin-right: 200rpx; */
	}

	.name {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.userName {
		font-size: 34rpx;
		margin-right: 10rpx;
	}

	.label_b {
		background-color: #999999;
		border: 1rpx solid #333333;
		color: #FFFFFF;
		border-radius: 10rpx;
		padding: 6rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.jianjie {
		font-size: 28rpx;
		padding: 0 30rpx;
		color: #555555;
	}

	.memory_box {
		/* padding: 30rpx; */
	}

	.memory {
		display: flex;
		flex-direction: column;
		/* background-color: #F0AD4E; */
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		border-bottom: 1rpx solid #C8C7CC;
	}

	.create_time {
		font-size: 28rpx;
		color: #999999;
	}

	.memory_title {
		font-size: 36rpx;
		color: #333333;
		margin: 20rpx 0;
	}

	.caozuo {
		display: flex;
		justify-content: flex-end;
	}

	.delete_memory {
		/* display: flex;
		justify-content: flex-end; */
		margin-top: 30rpx;
		margin-left: 20rpx;
		margin-right: 0;
		border: none;
		font-size: 22rpx;
		color: #999999;
	}

	.tab_style {
		border-bottom: 2rpx solid #EDEDED;
		padding-bottom: 10rpx;
		background-color: #FFFFFF;
	}

	.likelist {
		/* height: 128rpx; */
		display: flex;
		align-items: center;
		padding: 50rpx 30rpx;
		border-bottom: 2rpx solid #EDEDED;
		/* font-weight: bold; */
		/* font-size: 30rpx; */
	}


	/* 趣味画板 */
	.moreSetting {
		position: absolute;
		top: 16rpx;
		right: 0;
		z-index: 99;
		display: flex;
		flex-direction: column;
		align-items: flex-end;

	}

	.moreSetting>view {
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
	}



	/* 更多有趣按钮 */
	.more_inter {
		width: 52rpx;
		font-size: 30rpx;
		font-weight: bold;
		position: fixed;
		top: 400rpx;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16rpx 0rpx;
		border-left: 2rpx solid rgba(15,175,201,0.5);
		z-index: 2;
		background-color: rgba(15,175,201,0.5);
	}

	.more_inter>view:first-child {
		width: 0;
		height: 0;
		border-top: 58rpx solid rgba(15,175,201,0.5);
		border-right: 30rpx solid transparent;
		transform: rotate(90deg);
		position: absolute;
		bottom: -42rpx;
	}
	.more_inter>view:last-child {
		width: 0;
		height: 0;
		border-top: 58rpx solid rgba(15,175,201,0.5);
		border-left: 30rpx solid transparent; 
		transform: rotate(90deg);
		position: absolute;
		top: -42rpx;
	}



	.inter {
		width: 300rpx;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		/* padding-left: 40rpx; */
		padding-top: 140rpx;
		position: relative;
	}
	.inter>image{
		height: 100vh;
		position: absolute;
		top: 0;
	}

	.inter_list {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		padding: 20rpx 0;
		padding-left: 40rpx;
		position: relative;
		z-index: 2;
	}

	.inter_list>text {
		margin-left: 20rpx;
	}
	
	
	
	.list_img {
		width: 80%;
		display: flex;
		flex-wrap: wrap;
	}
	
	.img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 6rpx;
		margin: 10rpx 10rpx 0 0;
	}
</style>
